<template>
  <div class="div">
    <div class="box">
      <pull-to :top-load-method="refresh" :bottom-load-method="refresha">
        <div>



            <div class="list_box">
              <div v-if="arr===false||arr==''">
                <li class="list_wu">
                    <img src="./img/back.png" alt="">
                </li>
              </div>
                <div v-else>
                  <div class="list" v-for="(item,index) in arr" :key="index">
                      <img :src="item.avatar_head" class="list_img">

                      <div class="right">


                        <span class="list_name">{{item.nickname}}</span>
                        <div v-if="item.star==1">
                          <div class="list_fen">
                              <span class="pj">打分</span>
                              <img src="./img/f2.png">
                              <!-- <img src="./img/f2.png"> -->
                              <img src="./img/f1.png">
                              <img src="./img/f1.png">
                          </div>
                        </div>
                        <div v-else-if="item.star==2">
                          <div class="list_fen">
                              <span class="pj">打分</span>
                              <img src="./img/f2.png">
                              <img src="./img/f2.png">
                              <img src="./img/f1.png">
                          </div>
                        </div>
                        <div v-else-if="item.star==3">
                          <div class="list_fen">
                              <span class="pj">打分</span>
                              <img src="./img/f2.png">
                              <img src="./img/f2.png">
                              <img src="./img/f2.png">
                              <!-- <img src="./img/f1.png"> -->
                          </div>
                        </div>
                        <span class="list_time">{{time(item.addtime)}}</span>
                        <div class="list_pj">
                            {{item.evaluate_content}}
                        </div>
                        <div class="list_bq" >
                            <span class="biaoti">服务</span>
                            <div v-for="x in item.service">
                                <span>{{x.service_name}}</span>
                            </div>
                        </div>
                        <div class="img_list">
                            <div class="img_lista" v-for="x in item.attachment">
                              <img :src="x.obj_url">
                            </div>
                        </div>



                      </div>

                  </div>
                </div>
            </div>



        </div>
      </pull-to>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import PullTo from 'vue-pull-to'
export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
      return{
          page:1,
          arr:{ },
          token:this.GLOBAL.serverSrc
      }
  },
  created(){
        this.getData()
  },
  methods: {
    getData(){
      var url=this.token+'/hybrid/evaluate/b';
      var obj={
        user_id:this.$route.query.userid
      }
    //  alert(obj.user_id)
     var thet=this;
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          //console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    },
    time(nows){
       var now = new Date(nows*1000);
       var year = now.getFullYear();
       var month = now.getMonth() + 1;
       var date = now.getDate();
       return year + "-" + month + "-" + date;
    },
    refresh(loaded) {
      setTimeout(() => {
        this.getData();
      //  this.dataList.reverse();
        loaded('done');
      }, 200);
    },
    refresha(loaded){
      setTimeout(() => {

        this.page++;
        var url=this.token+"/hybrid/evaluate/b?page="+this.page;
        // alert(url);

        var obj={
          user_id:this.$route.query.userid
        }
        var thet=this;
        this.$axios.post(url,obj).then(response=>{
          response.data.data.forEach((item, index) => {

              thet.arr.push(item)
          })
        })
        .catch(function(error) {
            console.log(error);
        });
        loaded('done');
      }, 200);
    }
  }
}

</script>
<style lang="scss" scoped>
.div{
  width:100%;
  height:100%;
  background:rgb(247,247,247);
  position: fixed;
}
img{pointer-events: none;vertical-align: sub; }
.box{
  width:100%;
  height:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  // position:fixed;
  // top:0.64rem;
  overflow-x: hidden;
  overflow-y: scroll;
}


.list_box:nth-last-of-type(1){
    margin-bottom:0.8rem;
}

.list_wu{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  img{
    width:2rem;
    height:0.9rem;
    margin-top:48%;
  }
}
.list{
  width:3.55rem;
  background:#FFFFFF;
  border-radius:0.05rem;
  margin-top:0.18rem;
  margin-bottom:0.09rem;
  position: relative;
  display:flex;
  justify-content: flex-end;
  .list_img{
    width:0.59rem;
    height:0.59rem;
    border-radius:0.05rem;
    position:absolute;
    top:0.1rem;
    left:0.12rem;
  }
  .right{
    width:2.7rem;
    display:flex;
    flex-wrap:wrap;
    .list_name{
        display: inline-block;
        width:100%;
        color:#1B1B1B;
        font-size:0.15rem;
        font-weight:bold;
        margin-top:0.13rem;
    }
    .list_fen{
          width:100%;
          height:0.16rem;
          margin-top:0.06rem;
          .pj{
            color:#636363;
            font-size:0.1rem;
          }
          img{
            width:0.16rem;
            height:0.16rem;
            margin-left:0.06rem;
          }
    }
    .list_time{
        color:#939393;
        font-size:0.1rem;
        position: absolute;
        top:0.16rem;
        left:2.73rem;
    }
    .list_pj{
        width:2.6rem;
        margin-top: 0.16rem;
        color:#000000;
        font-size:0.11rem;
    }
    .list_bq{
        width:2.6rem;
        display:flex;
        flex-wrap:wrap;
        margin-top:0.16rem;
        margin-left:-0.03rem;
        margin-bottom:0.06rem;
        .biaoti{
          color:#636363;
          font-size:0.1rem;
          background:#FFFFFF;
          margin-top:0.02rem;
        }
        span{
          display:inline-block;
          height:0.14rem;
          line-height:0.17rem;
          padding:0 0.03rem 0 0.03rem;
          color:#46DCC3;
          font-size:0.1rem;
          background:rgb(227,250,246);
          margin-top:-0.03rem;
          margin-right:0.06rem;
          margin-bottom:0.06rem;
        }
      }
      .img_list{
          width:2.7rem;
          margin-top:0.1rem;
          .img_lista{
            float: left;
            img{
              width:0.6rem;
              height:0.6rem;
              border-radius:0.05rem;
              margin-bottom:0.06rem;
              margin-right:0.02rem;
            }
          }
        }
  }
}
</style>
